<template>
  <div class="app-container">
    <el-button
      icon="el-icon-plus"
      type="primary"
      @click="showAdd"
    >{{ $t('add') }}
    </el-button>
    <div>
      <el-table :data="runFileList" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item :label="$t('updateDate')">
                <span>{{ formatDate(props.row.updateDate) }}</span>
              </el-form-item>
              <el-form-item :label="$t('createdDate')">
                <span>{{ formatDate(props.row.createdDate) }}</span>
              </el-form-item>
              <el-form-item :label="$t('remark')">
                <span>{{ props.row.remark }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="name" :label="$t('name')" />
        <el-table-column prop="type" :label="$t('type')" />
        <el-table-column prop="version" :label="$t('version')" />
        <el-table-column
          :label="$t('function')"
          width="280"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-paperclip"
              @click="showCore(scope.row)"
            >{{ $t('qrCode') }}
            </el-button>
            <el-button
              type="text"
              icon="el-icon-download"
              @click="download(scope.row)"
            >{{ $t('download') }}
            </el-button>
            <el-button
              type="text"
              style="color: #f56c6c"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >{{ $t('delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="$t('qrCode')"
      :visible.sync="dialogCoreVisible"
      destroy-on-close
    >
      <div ref="qrCodeDiv" style="width:300px;margin: 0 auto" />
    </el-dialog>

    <el-dialog :visible.sync="dialogAppRunFileFormVisible">
      <el-form :model="appPackage">
        <el-form-item :label="$t('type')" label-width="20%">
          <el-select v-model="appPackage.type">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('version')" label-width="20%">
          <el-input v-model="appPackage.version" />
        </el-form-item>
        <el-form-item :label="$t('remark')" label-width="20%">
          <el-input v-model="appPackage.remark" />
        </el-form-item>
        <el-form-item :label="$t('file')" label-width="20%">
          <el-upload
            ref="upload"
            :headers="headers"
            drag
            name="file"
            :action="baseURL+'/app/package/insert'"
            :auto-upload="false"
            :on-success="handleSuccess"
            :on-error="handleError"
            :data="appPackage"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">拖到此处，或<em>点击上传</em></div>
            <div slot="tip" class="el-upload__tip">只能上传不超过1G</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAppRunFileFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="submitUpload">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import { cancelNotice, failureNotice, formatDate, successNotice } from '@/util/common'
import { deleteAppPackageList, listAppPackage } from '@/api/app/appPackageApi'
import { getToken } from '@/util/storage'

export default {
  name: 'AppPackage',
  filters: {},
  data() {
    return {
      dialogCoreVisible: false,
      baseURL: window.VUE_APP_BASE_API, // 'http://localhost:8016', // window.VUE_APP_BASE_API, // 'http://ztn-tech.com:8782',
      appId: null,
      appName: null,
      runFileList: [],
      mCheck: false,
      mList: [],
      dialogAppRunFileFormVisible: false,
      appPackage: {
        'packageId': null,
        'version': null,
        'remark': null,
        'type': null
      },
      headers: {
        'access-token': getToken()
      },
      typeList: [
        {
          value: 'android',
          label: this.$t('android')
        },
        {
          value: 'windows',
          label: this.$t('windows')
        }
      ]

    }
  },
  created() {
    const param = this.$route.query
    this.appId = param.appId
    this.appName = param.appName
    this.listAppPackage()
  },
  methods: {
    formatDate(time) {
      return formatDate(this, time)
    },
    showCore(item) {
      this.dialogCoreVisible = true
      this.$nextTick(() => {
        new QRCode(this.$refs.qrCodeDiv, {
          text: item.downloadPath,
          width: 250,
          height: 250,
          colorDark: '#333333', // 二维码颜色
          colorLight: '#ffffff', // 二维码背景色
          correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
        })
      })
    },
    showAdd() {
      this.dialogAppRunFileFormVisible = true
      this.appPackage = {
        appId: this.appId,
        type: 'android'
      }
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleSuccess(res, file, fileList) {
      successNotice(this)
      this.listAppPackage()
      this.dialogAppRunFileFormVisible = false
    },
    handleError(err, file, fileList) {
      failureNotice(this)
    },
    download(item) {
      window.open(
        item.downloadPath
      )
    },
    handleDelete(item) {
      const that = this
      this.$confirm(this.$t('delete'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(function() {
        deleteAppPackageList({ idList: [item.packageId] }).then(res => {
          that.listAppPackage()
        })
      }).catch(function() {
        cancelNotice(that)
      })
    },
    listAppPackage() {
      listAppPackage({ appId: this.appId }).then(res => {
        if (res.code === '200') {
          this.runFileList = res.data
        }
      })
    }
  }
}
</script>

